<template>
	<view id="main">
		<view id="searchStatic">
			<safe-hight-box background="#FBC241"></safe-hight-box>
			<view style="background-color: #FBC241;padding: 20upx 0upx;">
				<input :value="searchValue" @input="searchValue=$event.detail.value" class="input" placeholder="请输入搜索内容"  @confirm="goTo('/pages/search/index')" />
			</view>
		</view>
		<view v-show="showSearchFixed" style="position: fixed; top: 0upx; width: 100%; z-index: 10;">
			<safe-hight-box background="#FBC241"></safe-hight-box>
			<view style="background-color: #FBC241;padding: 20upx 0upx;">
				<input :value="searchValue" @input="searchValue=$event.detail.value" class="input" placeholder="请输入搜索内容"  @confirm="goTo('/pages/search/index')" />
			</view>
		</view>
		<view style="height: 20upx;"><view style="height: 288upx; background-color:#FBC241;border-radius: 0upx 0upx 40upx 40upx;"></view></view>
		<view class="display">
			<swiper>
				<swiper-item>
					<image class="swiper-item" src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image class="swiper-item" src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image class="swiper-item" src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="flex-between" style="margin-top: 30upx;margin-bottom: 30upx;">
				<image class="display-item" src="@/static/display1.png" @click="goTo('/pages/discount/index')"></image>
				<image class="display-item" src="@/static/display2.png" @click="goTo('/pages/collage/index')"></image>
			</view>
		</view>
		<view style="width: 750upx;height: 20upx;background: #F7F7F7;"></view>
		<view class="goods">
			<view class="goods-filter flex-between">
				<label :style="chooseShow==0?'font-size: 32upx;font-weight: bold;color: #000000;':''" @click="chooseShow=0">热门</label>
				<label :style="chooseShow==1?'font-size: 32upx;font-weight: bold;color: #000000;':''" @click="chooseShow=1">上新</label>
				<label :style="chooseShow==2?'font-size: 32upx;font-weight: bold;color: #000000;':''" @click="chooseShow=2">销量</label>
				<label :style="chooseShow==3?'font-size: 32upx;font-weight: bold;color: #000000;':''" @click="chooseShow=3">全部</label>
			</view>
			<view class="goods-item">
				<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
				<view class="goods-item-info flex-column-around">
					<label class="goods-item-info-title">initinitinitinitininitinitinitit</label>
					<view class="flex-between" style="width: 100%;">
						<label style="font-size: 24upx;color: #FF4646;">￥12000</label>
						<label style="font-size: 20upx;font-weight: 500;color: #666666;">剩余5</label>
					</view>
				</view>
			</view>
			<view style="display: inline-block;width: 22upx;"></view>
			<view class="goods-item">
				<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
				<view class="goods-item-info flex-column-around">
					<label class="goods-item-info-title">initinitinitinitininitinitinitit</label>
					<view class="flex-between" style="width: 100%;">
						<label style="font-size: 24upx;color: #FF4646;">￥12000</label>
						<label style="font-size: 20upx;font-weight: 500;color: #666666;">剩余5</label>
					</view>
				</view>
			</view>
			<view class="goods-item">
				<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
				<view class="goods-item-info flex-column-around">
					<label class="goods-item-info-title">initinitinitinitininitinitinitit</label>
					<view class="flex-between" style="width: 100%;">
						<label style="font-size: 24upx;color: #FF4646;">￥12000</label>
						<label style="font-size: 20upx;font-weight: 500;color: #666666;">剩余5</label>
					</view>
				</view>
			</view>
			<view style="display: inline-block;width: 22upx;"></view>
			<view class="goods-item">
				<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
				<view class="goods-item-info flex-column-around">
					<label class="goods-item-info-title">initinitinitinitininitinitinitit</label>
					<view class="flex-between" style="width: 100%;">
						<label style="font-size: 24upx;color: #FF4646;">￥12000</label>
						<label style="font-size: 20upx;font-weight: 500;color: #666666;">剩余5</label>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue:'',
				chooseShow:0,
				showSearchFixed:false
			}
		},
		onLoad() {
			
		},
		onPageScroll(res){
			const that=this;
			uni.createSelectorQuery().in(that).select('#searchStatic').boundingClientRect(data => {
				if(data.top<=0)
					that.showSearchFixed=true;
				else
					that.showSearchFixed=false;
			}).exec();
		},   
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.input{
		font-size: 28upx; 
		margin: 0 auto; 
		width: 80%; 
		background-color:#FFFFFF;
		padding: 18upx 24upx; 
		border-radius: 46upx;
	}
	.display{
		width: 686upx;
		margin: 0 auto;
		.swiper-item{
			width: 686upx;
			height: 344upx;
		}
		.display-item{
			width: 334upx;
			height: 180upx;
		}
	}
	.goods{
		padding: 32upx;
		.goods-filter{
			font-size: 28upx;
			font-weight: 500;
			color: #666666;
			width: 450upx;
		}
		.goods-item{
			margin-top: 20upx;
			width: 332upx;
			display:inline-block;
			image{
				width: 332upx;
				height: 328upx;
				border-radius: 10upx 10upx 0upx 0upx;
			}
			.goods-item-info{
				padding-left: 24upx;
				padding-right: 24upx;
				height: 114upx;
				.goods-item-info-title{
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>
